<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2022/11/2
  Time: 21:19
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="${pageContext.request.contextPath}/assets/images/favicon.png" type="image/png">
    <title>角色列表</title>

    <!--Begin  Page Level  CSS -->
    <link href="${pageContext.request.contextPath}/assets/plugins/morris-chart/morris.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/assets/plugins/jquery-ui/jquery-ui.min.css" rel="stylesheet"/>
    <!--End  Page Level  CSS -->
    <link href="${pageContext.request.contextPath}/assets/css/icons.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/assets/css/bootstrap.min.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/assets/css/style.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/assets/css/responsive.css" rel="stylesheet">
    <script src="${pageContext.request.contextPath}/assets/layui/layui.js"></script>
    <style>

        .main-content {
            background-color: rgb(236, 236, 237);

        }

        .wrapper {
            background-color: white;
        }

        tr td a {
            margin-right: 10px;
        }

        .container-fluid > .table > thead > tr > th {
            line-height: 40px;
            text-align: center;
        }

        .container-fluid > .table > tbody > tr > td {
            height: 80px;
            vertical-align: middle;
        }

        .container-fluid > .table > tbody > tr > td > i:hover {
            cursor: pointer;
        }

        .container-fluid > form #input1 {
            box-shadow: transparent;
            border: 1px solid #a7a2a2;
            border-radius: 5px;
        }

        .container-fluid {
            vertical-align: center;
        }

        /*.container-fluid > form #input1:focus {*/
        /*    outline-color: cyan;*/
        /*    box-shadow: transparent;*/
        /*}*/



        .backG {
            display: none;
            background-color: rgba(0, 0, 0, .3);
            width: 100%;
            height: 100%;
            position: fixed;
            top: 0;
            left: 0;
            z-index: 2012;
        }

        .add-edit {
            display: none;
            position: fixed;
            top: 45%;
            left: 50%;
            width: 50%;
            height: 60%;
            background-color: white;
            border: 1px solid #ccc;
            z-index: 10000;
            transform: translate(-50%, -50%);
        }

        .ae-header > .cancel:hover {
            cursor: pointer;
            color: #0e90d2;
        }

        .ae-body > div {
            margin: 3% 0;
        }

        .ae-body > div > label {
            text-indent: 0;
            width: 20%;
            margin-right: 5%;
        }

        .ae-body > div > label > span {
            float: right;
        }

        .selectC {
            display: inline-block;
            border-top-left-radius: .3rem;
            padding: .67rem 1.5rem;
            font-size: 1.25rem;
            margin-left: -1px;
            line-height: 1.25;
            background-color: #fff;
            border: 1px solid #dee2e6;
            border-bottom-left-radius: .3rem
        }

        .selectC:focus {
            outline: 0;
            box-shadow: 0 0 0 .0rem rgba(0, 123, 255, .25)
        }

        .toPage {
            display: inline-block;
            /*border-top-left-radius: .3rem;*/
            /*padding: .85rem 1.5rem;*/
            font-size: 1.25rem;
            height: 34px;
            margin-left: -1px;
            line-height: 1.25;
            /*background-color: #fff;*/
            border: 1px solid #dee2e6;
            /*border-bottom-left-radius: .3rem;*/
            width: 34px;
            text-align: center;
        }

        .toPage[type=text]:focus {
            outline: 0;
            box-shadow: 0 0 0 .0rem rgba(0, 123, 255, .25)
        }

        button{
            outline: none !important;
        }

        .input {
            display: inline-block;
            text-indent: 0px !important;
            width: 30%;
            height: 34px;
            padding: 6px 12px;
            font-size: 14px;
            line-height: 1.42857143;
            color: #555;
            background-color: #fff;
            background-image: none;
            border: 1px solid #ccc;
            border-radius: 4px;
            -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
            box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
            -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
            -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
            transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s
        }

        .input:focus {
            outline: #0e90d2;
        }
        .wrapper div {
            background-color: white;
        }

        .wrapper {
            background-color: #eee;
        }
    </style>

</head>

<body class="sticky-header">

<jsp:include page="../inc/left.jsp"/>

<div class="main-content">
    <jsp:include page="../inc/header.jsp"/>

    <!--body wrapper start-->
    <div class="wrapper">

        <!--Start Page Title-->
        <div class="page-title-box">
            <h4 class="page-title" style="text-indent: 1em">角色列表</h4>(周正义/杨网)
            <ol class="breadcrumb">
                <li>
                    <a href="${pageContext.request.contextPath}/index">首页</a>
                </li>
                <li>
                    <a href="${pageContext.request.contextPath}/permissions/admin">权限</a>
                </li>
                <li class="active">
                    角色列表
                </li>
            </ol>
            <div class="clearfix"></div>
        </div>

        <div class="container-fluid"
             style="margin-top: 20px;margin-bottom: 20px;  border:solid 1px rgba(0,0,0,0.2);padding:10px 20px 30px 10px">
            <%--            <form style="margin-top: 10px;text-indent: 2em" method="post">--%>
            <div style="margin-bottom: 20px">
                <span style="color: #100E0EC8;font-size: 18px;"><i class="fa fa-search"></i> 筛选搜索</span>
                <button class="btn btn-primary" type="button" style="float: right;margin-left: 10px"
                        onclick="mysearch(this)">查询搜索
                </button>
                <button class="btn" style="float: right;text-indent: 0" onclick="resetName()">重置</button>
            </div>
            <label for="input1" style="margin-left: 30px">输入搜索: </label>
            <span class="form-row">
                    <input name="sname" class="input" value="${pageInfo.search}" id="input1" placeholder="角色名称"
                           style="margin-left: 8px;padding: 5px">
                </span>
            <%--            </form>--%>
        </div>


        <div class="container-fluid"
             style="margin-top: 20px;margin-bottom: 20px;  border:solid 1px rgba(0,0,0,0.2);padding: 20px;">
            <span style="color: #100E0EC8;font-size: 18px;"><i class="fa fa-file-text-o"></i> 数据列表</span>
            <button class="btn btn-info" style="float: right" onclick="roleEdit(0)">添加</button>
        </div>


        <div style="padding: 0px;" class="container-fluid">
            <table class="table table-bordered table-hover" style="font-size: 15px">
                <thead>
                <tr>
                    <th>编号</th>
                    <th>角色名称</th>
                    <th>描述</th>
                    <th>用户数</th>
                    <th>添加时间</th>
                    <th>是否启用</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody style="text-align: center">
                <c:forEach items="${roleList}" var="a">
                    <tr>
                        <td>${a.id}</td>
                        <td>${a.name}</td>
                        <td>${a.description}</td>
                        <td>${a.adminCount}</td>
                        <td><fmt:formatDate value="${a.createTime}" pattern="yyyy-MM-dd hh:mm:ss"/></td>
                        <td><i class="fa ${a.status==0?"fa-toggle-off":"fa-toggle-on"} "
                               style="color: #519ff8;font-size: 32px" onclick="updateStatus(${a.id})"></i></td>
                        <td>
                            <a class="btn btn-primary"
                               href="${pageContext.request.contextPath}/permissions/allocMenu/${a.id}">分配菜单</a>
                            <a class="btn btn-primary"
                               href="${pageContext.request.contextPath}/permissions/allocResource/${a.id}">分配资源</a>
                            <a class="btn btn-primary" class="btn" onclick="roleEdit(${a.id})">编辑</a>
                            <a class="btn btn-danger" class="btn" onclick="deleteById(${a.id})">删除</a>
                        </td>
                    </tr>
                </c:forEach>
                </tbody>
            </table>
            <nav aria-label="...">
                <ul class="pagination">
                    <span id="current" hidden>${pageInfo.page}</span>
                    <span id="currentLimit" hidden>${pageInfo.limit}</span>
                    <li class="page-item disabled" style="border-color:white">
                        <span class="page-link" href="${pageContext.request.contextPath}/#">共${pageInfo.count}条数据</span>
                    </li>
                    <li style="float: left" class="page-item">
                        <select id="select_limit" name="limit" class="selectC">
                            <option value="10" ${pageInfo.limit==10?"selected":""}>10条/页</option>
                            <option value="12" ${pageInfo.limit==12?"selected":""}>12条/页</option>
                            <option value="14" ${pageInfo.limit==14?"selected":""}>14条/页</option>
                            <option value="16" ${pageInfo.limit==16?"selected":""}>16条/页</option>
                        </select>
                    </li>
                    <li class="page-item ${pageInfo.page==1?"disabled":""}">
                        <a class="page-link "${pageInfo.page==1?"href=''":""}
                           href="${pageContext.request.contextPath}/permissions/role?page=${pageInfo.page-1}&limit=${pageInfo.limit}&search=${param.search!=null?param.search:""}">上一页</a>
                    </li>
                    <li class="page-item ${pageInfo.page==1?"active":""}">
                        <a class="page-link"
                           href="${pageContext.request.contextPath}/permissions/role?page=1&limit=${pageInfo.limit}&search=${param.search!=null?param.search:""}">1</a>
                    </li>

                    <c:if test="${pageInfo.page>2}">
                        <li class="page-item disabled">
                            <span class="page-link">...</span>
                        </li>
                    </c:if>

                    <c:if test="${pageInfo.page>1&&pageInfo.page<pageInfo.cntpage}">
                        <li class="page-item ${(pageInfo.page>1&&pageInfo.page<pageInfo.cntpage)?"active":""}">
                            <span class="page-link">${pageInfo.page}</span>
                        </li>
                    </c:if>

                    <c:if test="${pageInfo.page<pageInfo.cntpage-1}">
                        <li class="page-item disabled ">
                            <span class="page-link">...</span>
                        </li>
                    </c:if>

                    <c:if test="${pageInfo.cntpage>1}">
                        <li class="page-item ${pageInfo.page==pageInfo.cntpage?"active":""}">
                            <a id="cntpage" class="page-link "
                               href="${pageContext.request.contextPath}/permissions/role?page=${pageInfo.cntpage}&limit=${pageInfo.limit}&search=${param.search!=null?param.search:""}">${pageInfo.cntpage}</a>
                        </li>
                    </c:if>
                    <li class="page-item  ${pageInfo.page==pageInfo.cntpage?"disabled":""}">
                        <a class="page-link" ${pageInfo.page==pageInfo.cntpage?"href='#'":""}
                           href="${pageContext.request.contextPath}/permissions/role?page=${pageInfo.page+1}&limit=${pageInfo.limit}&search=${param.search!=null?param.search:""}">下一页</a>
                    </li>
                    <li class="page-item">
                        <span class="disabled" style="cursor: pointer" tabindex="1" onclick="toPage()">前往</span>
                        <input id="page" type="text" class="toPage" style="float:left;">
                        <span class="disabled">页</span>
                    </li>

                </ul>
            </nav>
        </div>


        <div class="add-edit" style="padding: 20px">
            <form action="${pageContext.request.contextPath}/permissions/role/editRole" method="post">
                <div class="ae-header">
                    <span>编辑角色</span>
                    <span class="cancel" style="float:right;" onclick="cancel()">
                        <i class="fa fa-times"></i>
                    </span>
                </div>
                <input id="role-id" style="display: none" name="roleId">
                <div class="ae-body" style="text-indent: 4em;margin-top: 10%">
                    <div style="height: 10%;line-height: 10%;">
                        <label for="name"><span>角色名称:</span></label>
                        <input name="name" id="name" type="text" style="width: 50%">
                    </div>
                    <div style="height: 30%;line-height: 30%;">
                        <label for="description" style="position: relative;bottom: 80%"><span>描述:</span></label>
                        <textarea name="description" id="description" rows="4"
                                  style="height: 100%;line-height: 100%;width: 50%"></textarea>
                    </div>
                    <div style="height: 10%;line-height: 10%;">
                        <label for="status"><span>是否启用:</span></label>
                        <input type="radio" name="status" value="1" checked>是
                        &emsp;&emsp;<input type="radio" name="status" id="status" value="0">否
                    </div>
                </div>
                <div class="ae-footer" style="float: right;bottom: 0">
                    <span class="btn btn-default" onclick="cancel()">取消</span>
                    <input type="submit" class="btn btn-info" value="确认">
                </div>
            </form>
        </div>


    </div>
    <jsp:include page="../inc/footer.jsp"/>
</div>


<div class="backG"></div>
<!--Begin core plugin -->
<script src="${pageContext.request.contextPath}/assets/js/jquery.min.js"></script>
<script src="${pageContext.request.contextPath}/assets/js/bootstrap.min.js"></script>
<script src="${pageContext.request.contextPath}/assets/plugins/moment/moment.js"></script>
<script src="${pageContext.request.contextPath}/assets/js/jquery.slimscroll.js "></script>
<script src="${pageContext.request.contextPath}/assets/js/jquery.nicescroll.js"></script>
<script src="${pageContext.request.contextPath}/assets/js/functions.js"></script>
<!-- End core plugin -->

<!--Begin Page Level Plugin-->
<script src="${pageContext.request.contextPath}/assets/plugins/morris-chart/morris.js"></script>
<script src="${pageContext.request.contextPath}/assets/plugins/morris-chart/raphael-min.js"></script>
<script src="${pageContext.request.contextPath}/assets/plugins/jquery-sparkline/jquery.charts-sparkline.js"></script>
<script src="${pageContext.request.contextPath}/assets/pages/dashboard.js"></script>

<!--End Page Level Plugin-->

<script>
    function resetName() {
        $("#input1").val("");
        window.onload;
    }

    function deleteById(id) {
        let y = window.screen.height / 3;
        layer.confirm('是否要删除该角色？', {
                btn: ['确定', '取消'],
                title: '提示',
                icon: 3,
                offset: y
            }, function () {
                location.href = "${pageContext.request.contextPath}/permissions/role/deleteById/" + id;
            }
            , function () {
                window.onload;
            }
        )
    }

    function updateStatus(id) {
        let y = window.screen.height / 3;
        layer.confirm('是否要修改状态？', {
                btn: ['确定', '取消'],
                title: '提示',
                icon: 3,
                offset: y
            }, function () {
                location.href = "${pageContext.request.contextPath}/permissions/role/updateStatus/" + id;
            }
            , function () {
                window.onload;
            }
        )
    }

    function roleEdit(id) {
        $.get("${pageContext.request.contextPath}/permissions/getRole/" + id, function (role) {
            if (id == 0) {
                $("#role-id").val(id)
                $("#name").val("")
                $("#description").text("")
                $($(".add-edit input[type='radio']")[1]).removeAttr("checked");
                $($(".add-edit input[type='radio']")[0]).prop("checked", true);
                return
            }
            $("#role-id").val(id)
            $("#name").val(role.name)
            $("#description").text(role.description)
            $(".add-edit input[type='radio']").each(function (i, j) {
                $(j).removeAttr("checked");
                if ($(j).val() == role.status) {
                    $(j).prop("checked", true);
                }
            })

        })
        $(".add-edit").css("display", "block");
        $(".backG").css("display", "block");
    }

    function cancel() {
        $(".add-edit").css("display", "none");
        $(".backG").css("display", "none");
    }


    $("#select_limit").bind("change", function () {
        let limit = $("#select_limit").find("option:selected").val();
        let page = $("#current").text();
        let tag = $("<a>")
        tag[0].href = "${pageContext.request.contextPath}/permissions/role?page=1&limit=" + limit + "&search=" + $("#input1").val();
        tag[0].click();
    })

    $('#page').bind("keyup", function (obj) {
        let key = obj.originalEvent.keyCode
        let page = $("#page").val();
        let mpage = $("#cntpage").text();
        let limit = $("#currentLimit").text();
        if (key === 13) {
            if (!(page <= mpage && page > 0)) {
                alert("输入范围错误！！！")
            } else {
                let tag = $("<a>")
                tag[0].href = "${pageContext.request.contextPath}/permissions/role?page=" + page + "&limit=" + limit;
                tag[0].click();
            }
        }
    })

    function toPage() {
        let page = $("#page").val();
        if (page === null)
            return;
        let mpage = $("#cntpage").text();
        let limit = $("#currentLimit").text();
        if (!(page <= mpage && page > 0)) {
            alert("输入范围错误！！！")
        } else {
            let tag = $("<a>")
            tag[0].href = "${pageContext.request.contextPath}/permissions/role?page=" + page + "&limit=" + limit;
            tag[0].click();
        }
    }

    $("#input1").bind("keyup", function (obj) {
        let ct = $("#input1").val()
        let key = obj.originalEvent.keyCode
        let limit = $("#currentLimit").text();
        if (key === 13) {
            let tag = $("<a>")
            tag[0].href = "${pageContext.request.contextPath}/permissions/role?page=1&limit=" + limit + "&search=" + ct;
            tag[0].click();
        }
    })

    function mysearch(obj) {
        let ct = $("#input1").val()
        let limit = $("#currentLimit").text();
        let tag = $("<a>")
        tag[0].href = "${pageContext.request.contextPath}/permissions/role?page=1&limit=" + limit + "&search=" + ct;
        tag[0].click();
    }

</script>
</body>
</html>
